import React from 'react';
import { Row, Col, Form } from 'antd';
import { InputNumberC, FirstHeaderC, SecondHeaderC, PrimaryC } from '../../components';

class inputNumberCDemo extends React.Component {
  constructor(props) {
    super(props);
    this.formRef = React.createRef();
  }

  change = () => {
    console.log(this.formRef.current.getFieldsValue());
    this.formRef.current.setFieldsValue({ 20: '666' });
  };

  render() {
    return (
      <Form ref={this.formRef} labelWrap={true}>
        <Row style={{ padding: '20px' }}>
          <FirstHeaderC title='inputNumber输入框' />
          <Col span={6}>
            <SecondHeaderC title='基本场景' />
            <InputNumberC
              title='普通输入支持换行显示' // 显示名称
              dataIndex='1' // Form识别的Item ID
              onChange={(e) => console.log(e)}
              helper='help提示'
              onBlur={() => {
                console.log(111);
              }}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='有初始化值' />
            <InputNumberC
              title='普通输入' // 显示名称
              dataIndex='2' // Form识别的Item ID
              initialValue='3333'
              onChange={(e) => console.log(e)}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='placeholder' />
            <InputNumberC
              title='普通输入' // 显示名称
              dataIndex='3' // Form识别的Item ID
              onChange={(e) => console.log(e)}
              placeholder='placeholder'
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='必填' />
            <InputNumberC
              title='普通输入' // 显示名称
              dataIndex='4' // Form识别的Item ID
              onChange={(e) => console.log(e)}
              rules={[{ required: true, message: '请输入' }]}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='前缀' />
            <InputNumberC
              title='普通输入' // 显示名称
              dataIndex='5' // Form识别的Item ID
              onChange={(e) => console.log(e)}
              prefix='￥'
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='禁用' />
            <InputNumberC
              title='普通输入' // 显示名称
              dataIndex='6' // Form识别的Item ID
              onChange={(e) => console.log(e)}
              disabled={true}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='单位' />
            <InputNumberC
              title='普通输入' // 显示名称
              dataIndex='7' // Form识别的Item ID
              onChange={(e) => console.log(e)}
              unit='万元'
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='最大最小' />
            <InputNumberC
              title='普通输入' // 显示名称
              dataIndex='8' // Form识别的Item ID
              onChange={(e) => console.log(e)}
              max={10}
              min={-5}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='step' />
            <InputNumberC
              title='普通输入' // 显示名称
              dataIndex='9' // Form识别的Item ID
              onChange={(e) => console.log(e)}
              step={5}
              formItemLayout={{ labelCol: { span: 3 }, wrapperCol: { span: 3 } }}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='千分位展示' />
            <InputNumberC
              title='普通输入' // 显示名称
              dataIndex='10' // Form识别的Item ID
              onChange={(e) => console.log(e)}
              splitStyle={true}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='精度' />
            <InputNumberC
              title='普通输入' // 显示名称
              dataIndex='11' // Form识别的Item ID
              onChange={(e) => console.log(e)}
              precision={3}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='formatter百分数' />
            <InputNumberC
              title='普通输入' // 显示名称
              dataIndex='12' // Form识别的Item ID
              initialValue={80}
              onChange={(e) => console.log(e)}
              formatter={(value) => `${value}%`}
              parser={(value) => value.replace('%', '')}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='改变值' />
            <InputNumberC
              title='普通输入' // 显示名称
              dataIndex='20' // Form识别的Item ID
            />
            <PrimaryC title='点击更改' onClick={this.change} />
          </Col>
        </Row>
      </Form>
    );
  }
}

export default inputNumberCDemo;
